<!--  -->
<template>
  <div class="dialog-editor-page" v-if="dialogShow">
    <SetDesignDialog :title="'页面'" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose" :hasfooter="false" :zIndex="1000"
      ref="settingPageDialog">
      <div class="dlg-main-box page-set">
        <PageListN ref="pageList" :closeDialog="close" :editorPageName="editorPageName" :openCenter="openCenter" />
        <div class="page-btnBox">
          <div class="page-add-btn" @click="create">+ 添加页面</div>
          <div class="page-more-opt" @click="moreOpt">更多操作</div>
        </div>
      </div>
    </SetDesignDialog>
    <EditorPageName ref="editorPageName" />
    <SavePage ref="createPage" :propsOnSubmit="onSubmit" />
  </div>
</template>

<script>
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import PageListN from '@/components/common/design/dialog/page/PageListN.vue'
import SavePage from '@/components/common/design/dialog/page/editor/SavePage.vue'
import EditorPageName from '@/components/common/design/dialog/page/editor/EditorPageName.vue'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { publishdata } from '@/core/functions.js'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      dialogShow: true,
      loading: true
    }
  },
  computed: {
    ...mapGetters(['currentMenu', 'currentSite'])
  },
  mounted () {
    this.dialogShow = false
  },
  methods: {
    show () {
      this.dialogShow = true
    },
    // 关闭弹出层
    close () {
      this.dialogShow = false
    },
    saveclose () {
      this.close()
    },
    // 弹窗居中
    openCenter () {
      if (this.$refs['settingPageDialog']) {
        this.$refs['settingPageDialog'].open()
      }
    },
    onSubmit () {
      // 提交至后台成功后执行
      this.$refs.pageList.getData()
    },
    create () {
      this.$refs['createPage'].show(null, '新建页面')
    },
    editorPageName (id) {
      this.$refs['editorPageName'].show(id)
    },
    moreOpt () {
      let dataBody = false
      try {
        dataBody = BackendjsFunctions.publish()
      } catch (error) {
        console.error(error)
      }
      if (!publishdata(dataBody)) {
        this.$store.dispatch('menuChange', {index: '3', isAlwaysPush: true})
      } else {
        this.$confirm('确定不发布已编辑的内容直接进入页面管理么?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('menuChange', {index: '3', isAlwaysPush: true})
        }).catch(() => {
        })
      }
      // this.$store.dispatch('menuChange', {index: '3', isAlwaysPush: true})
    }
  },
  components: {
    SetDesignDialog,
    PageListN,
    SavePage,
    EditorPageName
  }
}
</script>

<style scoped>
.page-btnBox {
  margin-top: 20px;
  text-align: center;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  width:100%;
  justify-content: center;
}
.page-btnBox .page-add-btn {
  cursor: pointer;
  display: inline-block;
  line-height: 2.8;
  padding: 0 50px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  background: #E4EFFC;
  border: 1px solid #E4EFFC;
  color: #1c64ea;
  margin-right: 20px;
}
.page-btnBox .page-more-opt {
  cursor: pointer;
  display: inline-block;
  line-height: 2.8;
  padding: 0 50px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  border: 1px solid #ddd;
  color: #333;
}
</style>
